<template>
	<view>
		<view class="cu-list menu">
			<view class="cu-item arrow" hover-class="hover" @click="upAvatarShow=true">
				<view class="content">
					<text>头像</text>
				</view>
				<view class="action">
					<view class="cu-avatar round" :style="'background-image: url(' + userinfo.full_picture + ')'"></view>
				</view>
			</view>

			<view class="cu-item arrow" hover-class="hover" @click="modalName='nicknameModal'">
				<view class="content">
					<text>昵称</text>
				</view>
				<view class="action">
					<text class="text-gray">{{userinfo.nickname||'???'}}</text>
				</view>
			</view>
			
			<view class="cu-item arrow" hover-class="hover">
				<view class="content">
					<text>手机号</text>
				</view>
				<view class="action">
					<text class="text-gray">{{userinfo.mobile||'???'}}</text>
				</view>
			</view>

			<view class="cu-item arrow" hover-class="hover">
				<view class="content">
					<text>推荐人</text>
				</view>
				<view class="action">
					<text class="text-gray">{{userinfo.parent == null ? '无' : userinfo.parent.mobile}}</text>
				</view>
			</view>

			<view class="cu-item arrow" hover-class="hover" @click="$goto('/pages/mine/help')">
				<view class="content">
					<text>帮助中心</text>
				</view>
			</view>

			<view class="cu-item arrow" hover-class="hover" @click="$goto('/pages/shop/address-list')">
				<view class="content">
					<text>收货地址</text>
				</view>
			</view>

			<view class="cu-item arrow" hover-class="hover" @click="clear">
				<view class="content">
					<text>清除缓存</text>
				</view>
			</view>



		</view>

		<view class="cu-list menu">
			<view class="cu-item arrow" hover-class="hover" @click="checkUpdate">
				<view class="content">
					<text>检查更新</text>
				</view>
			</view>
		</view>

		<view class="cu-list menu">
			<view class="cu-item arrow" hover-class="hover" @click="logout">
				<view class="content">
					<text>退出登录</text>
				</view>
			</view>
		</view>

		<!-- 昵称 -->
		<view class="cu-modal" :class="modalName=='nicknameModal'?'show':''" @click="hideModal">
			<view class="cu-dialog">
				<view class="bg-white padding">
					<view class="cu-form-group">
						<input placeholder="输入昵称" v-model="newNickname" name="input" @click.stop=""></input>
					</view>
					<view class="cu-form-group flex justify-center padding">
						<button class="cu-btn bg-green" @click.stop="cgNickname">确定</button>
					</view>
				</view>
			</view>
		</view>

		<!-- 更新 -->
		<u-mask :show="show">
			<view class="wrap">
				<view class="bg">
					<view class="ver">版本：{{version}}</view>
					<u-gap height="24"></u-gap>
					<scroll-view scroll-y="true" class="info">
						<u-parse :html="html"></u-parse>
					</scroll-view>

					<view class="progress">
						<u-line-progress striped striped-active active-color="#EEBC80" :percent="progress" v-show="installing"></u-line-progress>
					</view>
					<my-btn style="width: 300rpx;" bg="linear-gradient(270deg, rgba(225, 165, 94, 1) 0%, rgba(255, 215, 166, 1) 100%)"
					 @click.native="update">立即更新</my-btn>
				</view>
			</view>
		</u-mask>

		<!-- 上传头像 -->
		<u-popup v-model="upAvatarShow" mode="center">
			<view>
				<u-upload :action="$store.state.upload" upload-text="修改头像" :max-count="1" :form-data="{type: 'portrait'}" :header="{Authorization: 'Bearer ' + this.$store.state.token}"
				 @on-success="upAvatarEnd"></u-upload>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import store from '@/store.js'
	export default {
		data() {
			return {
				modalName: null,
				avatar: '',
				newNickname: '',
				// 更新
				show: false,
				version: '',
				html: '',
				pkgUrl: '',
				wgtUrl: '',
				installing: false,
				progress: 0,
				// 结束
				upAvatarShow: false,
			}
		},
		computed: {
			userinfo: state => store.state.userinfo
		},
		methods: {
			logout() {
				this.$modal({
					content: '确定要退出登录吗？',
					confirm: () => {
						this.$store.commit('userLogout')
						setTimeout(() => {
							this.$goto('/pages/tabbar/tab4', 'tab')
						})
					}
				})
			},
			upAvatarEnd(e) {
				if (e.code == 0) {
					this.$msg('修改成功')
					this.upAvatarShow = false
					this.$u.api.getUserinfo()
				} else {
					this.$msg('修改失败')
				}
			},
			clear() {
				uni.showLoading({
					title: '请稍等...'
				})
				setTimeout(() => {
					uni.hideLoading();
					this.$msg('清理完成')
				}, 1500);
			},
			cgNickname() {
				this.$u.put('/user/nickname', {
					nickname: this.newNickname
				}).then(res => {
					this.hideModal();
					this.$u.api.getUserinfo();
				})
			},
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null
			},
			checkUpdate() {
				// #ifdef APP-PLUS
				plus.runtime.getProperty(plus.runtime.appid, wgtinfo => {
					let {
						name,
						version
					} = wgtinfo
					this.$u.get('/app/update', {
						name,
						version
					}).then(res => {
						let result = res.data.result
						if (result.update) {
							this.version = result.version
							this.html = result.update_content
							this.pkgUrl = result.pkgUrl
							this.wgtUrl = result.wgtUrl
							this.show = true
						}
						this.$emit('update', result.update)
					})
				})
				// #endif
			},
			update() {
				if (!this.installing) {
					// #ifdef APP-PLUS
					if (this.pkgUrl) {
						plus.runtime.openURL(this.pkgUrl);
					} else if (this.wgtUrl) {
						let task = uni.downloadFile({
							url: this.wgtUrl,
							success: res => {
								plus.runtime.install(res.tempFilePath, {
									force: false
								}, () => {
									this.installing = false
									this.progress = 0
									plus.runtime.restart();
								}, err => {
									this.$msg('安装失败...')
								})
							}
						})
						this.installing = true
						task.onProgressUpdate((res) => {
							this.progress = res.progress
						});
					}
					// #endif
				} else {

				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #F4F4F4;
	}

	.arrow.hover {
		background: rgba(0, 0, 0, 0.05);
	}


	// 更新
	.wrap {
		position: relative;
		width: 750rpx;
		height: 100vh;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.bg {
		width: 592rpx;
		height: 922rpx;
		background: url(../../static/images/update-bg.png);
		background-size: 100% 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		padding: 340rpx 0 50rpx 0;
	}

	.ver {
		color: white;
		font-size: 30rpx;
		font-weight: 500;
		letter-spacing: 2rpx;
	}

	.info {
		width: 500rpx;
		height: 270rpx;
		padding: 32rpx 16rpx;
		overflow-y: auto;
	}

	.progress {
		width: 500rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		padding: 0 16rpx;
	}
</style>
